<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="options.formOps"
      @onQuery="getList"
    >
      <!-- 有插槽 -->
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
    >
      <!-- default插槽仅操作项前面 -->
      <!-- 灵活位置使用  before+key  和 after+key 插槽 -->
      <template #default>
        <el-table-column
          label="负责人部门"
          align="center"
          key="deptName"
          prop="deptName"
        />
        <el-table-column
          label="负责人名称"
          align="center"
          key="userName"
          prop="userName"
        />
      </template>

      <template #actionButton="{ row }">
        <el-button type="text" icon="Edit" @click="handleEdit(row)"
          >修改</el-button
        >
      </template></Table
    >
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      @onSubmit="onSubmit"
      :slots="['deptSlot', 'userSlot', 'cuoshi1', 'cuoshi2', 'cuoshi3']"
      :title="dialogType === 'add' ? '新增风险分析清单' : '修改风险分析清单'"
    >
      <template #deptSlot>
        <el-form-item label="责任部门" prop="deptId" label-position="right">
          <TreeSelect
            v-model="form.deptId"
            :options="deptTree"
            @change="changeDept"
            style="width: 100%"
          ></TreeSelect>
        </el-form-item>
      </template>
      <template #userSlot>
        <el-form-item label="责任人" prop="userId" label-position="right">
          <el-select
            @change="userIdChange"
            style="width: 100%"
            v-model="form.userId"
          >
            <el-option
              v-for="user in userList"
              :value="user.userId"
              :label="user.nickName"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #cuoshi1>
        <el-form-item label="措施分类1" label-position="right">
          <el-select
            @change="changeMeasuresOne"
            style="width: 100%"
            v-model="form.measuresOne"
          >
            <el-option value="工程技术"></el-option>
            <el-option value="维护保养"></el-option>
            <el-option value="操作行为"></el-option>
            <el-option value="应急措施"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #cuoshi2> </template>
      <template #cuoshi3> </template>
    </DialogVform>
  </div>
</template>

<script setup>
import { deptTreeSelect } from "@/api/system/user";
import Table from "@/components/Table/index.vue";
import DialogVform from "@/components/dialogVform/index";
import SearchForm from "@/components/searchForm/index";
import { apis as APIS } from "@/api/fxfjgk/fxfxqd.js";
import formJson from "./options.json";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import TreeSelect from "@/components/TreeSelect/index";
const { proxy } = getCurrentInstance();
const userList = ref([]);
const deptTree = ref([]);
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  // 筛选项配置
  formOps: ops.filter((i) =>
    ["measuresProject", "dangerEvent"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const plugEdit = (row) => {
  form.value = { ...row };
};
const table = ref();
// 传入配置调用方法取页面方法和变量
const {
  onSubmit,
  fetchData,
  handleEdit,
  handleAdd,
  handleDel,
  getList,
  form,
  queryParams,
  dialogType,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
});
onMounted(() => {
  deptTreeSelect().then((res) => {
    console.log(res);
    deptTree.value = res.data;
  });
});
</script>

<style lang="scss" scoped></style>
